<script setup lang="ts">
interface RankingItem {
  rank: number;
  organization: string;
  name?: string;
  value: number | string;
}

defineProps<{
  data: RankingItem[];
  type: 'organization' | 'personal';
}>();

/**
 * 格式化数值显示
 * @param value 需要格式化的值
 * @returns 格式化后的字符串
 */
const formatValue = (value: number | string): string => {
  try {
    // 如果是字符串，先转换为数字
    const numValue =
      typeof value === 'string' ? Number.parseFloat(value) : value;

    // 检查是否是有效数字
    if (Number.isNaN(numValue)) {
      console.warn('Invalid number value:', value);
      return '0.0';
    }

    return numValue.toFixed(1);
  } catch (error) {
    console.error('Error formatting value:', error);
    return '0.0';
  }
};
</script>

<template>
  <div class="ranking-box">
    <div class="ranking-header">
      <div class="header-row" :class="{ personal: type === 'personal' }">
        <span class="rank-col">排名</span>
        <span class="org-col">组织</span>
        <span class="name-col" v-if="type === 'personal'">用户名称</span>
        <span class="value-col">时长(h)</span>
      </div>
    </div>
    <div class="ranking-content">
      <div
        v-for="item in data"
        :key="item.rank"
        class="ranking-item"
        :class="{ 'top-three': item.rank <= 3, personal: type === 'personal' }"
      >
        <span class="rank-col">
          <span class="rank-number">{{ item.rank }}</span>
        </span>
        <span class="org-col" :title="item.organization">{{
          item.organization
        }}</span>
        <span class="name-col" v-if="type === 'personal'" :title="item.name">{{
          item.name
        }}</span>
        <span class="value-col">{{ formatValue(item.value) }}</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.ranking-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 270px;
  padding: 12px;
  color: #fff;

  .ranking-header {
    margin-bottom: 12px;

    .title {
      margin-bottom: 12px;
      font-size: 16px;
      font-weight: 500;
      color: #00eaff;
    }

    .header-row {
      display: grid;
      // 修改为更均匀的列宽分配
      grid-template-columns: 60px 1fr 1fr;
      padding: 8px 0;
      font-size: 14px;
      color: rgb(255 255 255 / 80%);
      border-bottom: 1px solid rgb(0 234 254 / 30%);

      &.personal {
        // 个人模式下的列宽分配
        grid-template-columns: 60px 1fr 1fr 1fr;
      }
    }
  }

  .ranking-content {
    flex: 1;
    overflow-y: auto;

    &::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background: rgb(0 234 254 / 30%);
      border-radius: 3px;
    }

    .ranking-item {
      display: grid;
      // 与header-row保持一致的列宽
      grid-template-columns: 60px 1fr 1fr;
      padding: 8px 0;
      font-size: 14px;
      border-bottom: 1px solid rgb(255 255 255 / 10%);
      transition: all 0.3s;

      &.personal {
        // 与header-row保持一致的列宽
        grid-template-columns: 60px 1fr 1fr 1fr;
      }

      &:hover {
        background: rgb(0 234 254 / 10%);
      }

      &.top-three {
        .rank-number {
          font-weight: bold;
          color: transparent;
          background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%);
          background-clip: text;
        }
      }
    }
  }

  // 调整各列的内边距，使内容更加居中
  .rank-col {
    padding: 0 5px;
    text-align: center;

    .rank-number {
      font-size: 16px;
    }
  }

  .org-col {
    padding: 0 10px;
    overflow: hidden;
    color: #ff6b3d;
    text-align: center; // 改为居中对齐
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .name-col {
    padding: 0 10px;
    overflow: hidden;
    color: #00eaff;
    text-align: center; // 改为居中对齐
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .value-col {
    padding: 0 10px;
    font-family: DINPro, Arial, sans-serif;
    color: #7cffb2;
    text-align: center; // 改为居中对齐
  }
}
</style>
